<template>
  <div>
    <div class="system" v-if="systemInfo">
      <div class="add"><i class="iconfont icon-jia1"></i></div>
      <div class="chassis">
        <div class="message">底盘信息</div>
        <div class="one">
          <div class="title">底盘控制模式</div>
          <div class="value">{{ systemInfo.chassis.pattern }}</div>
        </div>
        <div class="two">
          <div class="title">底盘状态</div>
          <div class="value">{{ systemInfo.chassis.status }}</div>
        </div>
        <div class="three">
          <div class="title">线速度（m/s）</div>
          <div class="value">{{ systemInfo.chassis.speed }}</div>
        </div>
        <div class="four">
          <div class="title">角速度（rad/s）</div>
          <div class="value">{{ systemInfo.chassis.angle }}</div>
        </div>
        <div class="five">
          <div class="title">底盘错误信息反馈</div>
          <div class="value">{{ systemInfo.chassis.errInfo }}</div>
        </div>
      </div>
      <div class="sensor">
        <div class="message">传感器</div>
        <div class="text">
          摄像头
          <hr />
          imu
          <hr />
          激光雷达
        </div>
        <div class="dot">
          <i
            class="iconfont icon-yuandian1"
            :class="{ active: systemInfo.sensor.camera == false }"
          ></i>
          <hr />
          <i
            class="iconfont icon-yuandian1"
            :class="{ active: systemInfo.sensor.imu == false }"
          ></i>
          <hr />
          <i
            class="iconfont icon-yuandian1"
            :class="{ active: systemInfo.sensor.lidar == false }"
          ></i>
        </div>
      </div>
      <div class="disk">
        <div class="message">磁盘</div>
        <div class="info">
          {{ systemInfo.disk.freeDisk }}G可用,共{{ systemInfo.disk.totalDisk }}G
          <hr />
          <div class="memory">
            <div
              class="memory-percent"
              ref="memoryPercent"
              v-if="memoryPercent"
            ></div>
          </div>
        </div>
      </div>
      <div class="battery">
        <div class="message">电池信息</div>
        <div class="one">
          <div class="title">电压（V）</div>
          <div class="value">{{ systemInfo.battery.voltage }}</div>
        </div>
        <div class="two">
          <div class="title">电流（A）</div>
          <div class="value">{{ systemInfo.battery.current }}</div>
        </div>
        <div class="three">
          <div class="title">电量（%）</div>
          <div class="value">{{ systemInfo.battery.electricity }}</div>
        </div>
        <div class="four">
          <div class="title">温度（℃）</div>
          <div class="value">{{ systemInfo.battery.temperature }}</div>
        </div>
      </div>
      <div class="mileage">
        <div class="message">行驶里程</div>

        <div class="one">
          <div class="title">累计行驶里程（km/h）</div>
          <div class="value">{{ systemInfo.mileage.totalMileage }}</div>
        </div>
        <div class="two">
          <div class="title">本次行驶里程（m）</div>
          <div class="value">{{ systemInfo.mileage.currentMileage }}</div>
        </div>
      </div>
      <div class="lidar">
        <div class="text">3D激光雷达</div>
        <div class="video-logo"><i class="iconfont icon-center"></i></div>
      </div>
      <div class="RGB-camera">
        <div class="text">RGB相机</div>
      </div>
      <div class="button">
        <el-dropdown>
          <span class="el-dropdown-link">
            声源播放<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              ><el-button type="info" @click="audio1Play"
                >声源1</el-button
              ></el-dropdown-item
            >
            <el-dropdown-item
              ><el-button type="info" @click="audio2Play"
                >声源2</el-button
              ></el-dropdown-item
            >
            <el-dropdown-item
              ><el-button type="info" @click="audio3Play"
                >声源3</el-button
              ></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      systemInfo: null,
      memoryPercent: 0,
      message: "",
      messages: [],
      count: 0,
    };
  },
  computed: {
    ...mapState("SystemModule", ["info"]),
  },
  created() {
    // this.getSystemInfo();
    // 订阅主题
    // this.subscribe();
    if (this.info.count > 0) {
      this.setSystemInfo();
    }
    this.$store.commit("SystemModule/addCount");
  },
  methods: {
    // ...mapMutations("SystemModule", ["setElectricity"]),
    getSystemInfo() {
      this.$api
        .getSystemInfo()
        .then((res) => {
          if (res.data.status === 200) {
            this.systemInfo = res.data;
            // console.log("systemInfo:", this.systemInfo);
            this.memoryPercent =
              (this.systemInfo.disk.totalDisk - this.systemInfo.disk.freeDisk) /
              this.systemInfo.disk.totalDisk;
            this.setElectricity(this.systemInfo.battery.electricity);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    setSystemInfo() {
      this.systemInfo = this.info;
      this.memoryPercent =
        (this.systemInfo.disk.totalDisk - this.systemInfo.disk.freeDisk) /
        this.systemInfo.disk.totalDisk;
    },
    audio1Play() {
      console.log(`播放声源1`);
    },
    audio2Play() {
      console.log(`播放声源2`);
    },
    audio3Play() {
      console.log(`播放声源3`);
    },
  },
  watch: {
    memoryPercent(val) {
      this.$nextTick(() => {
        this.$refs.memoryPercent.style.width = val * 100 + "%";
      });
    },
    info(val) {
      this.systemInfo = val;
      this.memoryPercent =
        (this.systemInfo.disk.totalDisk - this.systemInfo.disk.freeDisk) /
        this.systemInfo.disk.totalDisk;
    },
  },
};
</script>
<style lang="less" scoped>
.system {
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  hr {
    border: none;
  }
  .message {
    font-size: 25px;
    margin-bottom: 5px;
    position: absolute;
    top: 8px;
    left: 20px;
  }
  .title {
    font-size: 10px;
    margin-top: 10px;
  }
  .value {
    font-size: 30px;
  }
  .add {
    background: #494141;
    width: 160px;
    height: 150px;
    margin: 5px;
    text-align: center;
    line-height: 150px;
    i {
      font-size: 100px;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .chassis {
    background: #494141;
    height: 150px;
    width: 800px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-around;
    padding: 10px;
    margin: 5px;
    position: relative;
    .one,
    .two,
    .three,
    .four,
    .five {
      width: 20%;
    }
  }
  .sensor {
    background: #494141;
    height: 150px;
    width: 160px;
    margin: 5px;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    .dot {
      position: absolute;
      right: 10px;
      top: 50px;
      i {
        color: rgb(20, 234, 20);
        &.active {
          color: red;
        }
      }
    }
    .text {
      position: absolute;
      left: 20px;
      top: 50px;
    }
  }
  .disk {
    background: #494141;
    height: 150px;
    width: 160px;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    overflow: hidden;
    margin: 5px;
    .info {
      position: absolute;
      top: 50px;
      left: 20px;
      .memory {
        width: 100%;
        height: 10px;
        background: #827b7b;
        .memory-percent {
          height: 100%;
          background: #7c8eeb;
        }
      }
    }
  }
  .battery {
    background: #494141;
    height: 150px;
    width: 640px;
    margin: 5px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    .one,
    .two,
    .three,
    .four {
      width: 25%;
    }
  }
  .mileage {
    background: #494141;
    height: 150px;
    width: 320px;
    box-sizing: border-box;
    padding: 10px;
    margin: 5px;
    display: flex;
    position: relative;
    .one,
    .two {
      width: 50%;
    }
  }
  .lidar,
  .RGB-camera {
    width: 400px;
    height: 220px;
    background: #494141;
    margin: 5px;
    position: relative;
    .text {
      position: absolute;
      top: 10px;
      left: 10px;
    }
    .video-logo {
      position: absolute;
      top: 10px;
      right: 10px;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .one,
  .two,
  .three,
  .four,
  .five {
    box-sizing: border-box;
    padding: 32px 0 0 10px;
    position: relative;
  }
  .two:before,
  .three:before,
  .four:before,
  .five:before {
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height: 80%;
    // border-left: 2px solid black; /* 虚线边框 */
    // clip-path: polygon(70% 0,100% 50%,70% 100%);
    background: linear-gradient(#434444, #bab9bc, #434444);
  }
  .button {
    position: absolute;
    top: 30px;
    right: 10px;
    /deep/.el-dropdown-link {
      cursor: pointer;
      color: #a39f9f;
      border: 1px solid #494141;
      padding: 5px;
    }
  }
}
</style>
<style lang="less">
.el-dropdown-menu {
  background: #494949;
  border: none;
  width: 85px;
  .el-dropdown-menu__item {
    padding: 4px;
  }
  .el-dropdown-menu__item:hover {
    background: #000;
  }
}
.el-popper .popper__arrow {
  display: none;
}
</style>
